<template>
    <view class="box">
        <view class="record" v-for="item in list" :key="item.utime">
            <!-- header s -->
            <view class="header">
                <view class="text1">{{item.utime | date}}</view>
                <text class="text2">{{item.point}}</text>
            </view>
            <!-- header e -->
            <!-- footer s -->
            <view class="footer">
                <view class="imgtext" v-for="(i,idx) in item.items" :key="idx">
					<view style="display: flex;flex-direction: column;">
						<view>
						    <image class="img1" :src="i.image"></image>
						    <text>{{i.name}}</text>
						</view>
						<view style="margin-top: 20rpx;display: flex;justify-content: space-between;width: 500rpx;">
							<view>状态: {{item.status_text}}</view>
							
							<view class="shopping" @click="toshowQrcode(item)" v-if="item.status == 0">
							    <text>出示兑换码</text>
							</view>
							
						</view>
					</view>

          <!--          <view>
                        <text>状态: {{item.status_text}}</text>
                        <br>
                    </view> -->
                </view>
                
                <!-- <view>
                    <image class="img2" src="../../static/img/myhome/fc-delete@3x.png"></image>
                </view> -->
            </view>
            <!-- footer e -->
        </view>
        <u-loadmore
            :status="status" 
            :load-text="loadText" />
			
			<u-popup v-model="show" mode="center" border-radius="14">
					<view>
						<u-image width="600rpx" height="700rpx" :src="src"></u-image>
					</view>
				</u-popup>
			
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                params: {
                    page: 1,
                    limit: 20,
                    status: 6,
                },
                status: 'loading',
                loadText: {
                    loadmore: '上拉加载更多',
                    loading: '加载中...',
                    nomore: '没有更多数据了'
                },
                olPage: 1,
				src:'',
				show:false
            };
        },
        mounted() {
            this._getorderlist();
        },
        onReachBottom() {
            this.params.page++;
            this._getHsAmount();
        },
        methods: {
			toshowQrcode(item){
				console.error()
				var params = {
					order_id:this.list[0].id
				}
				this.$u.api.showQrcode(params).then(res => {
					this.src = res.img
					this.show = true
					console.error(res)
				}).catch(err => {
				    // uni.hideLoading();
				})
			},
            // 商城订单列表api
            _getorderlist() {
                // uni.showLoading({
                //     title: '加载中'
                // });
                this.status = 'loading';
                this.$u.api.getorderlist(this.params).then(res => {
					console.error(res)
                    // this.list = res.list
                    // uni.hideLoading();
                    if(this.params.page == 1) {
                        this.status = 'nomore';
                        this.list = res.list.data;
                    } else {
                        if(res.list.data <= 0) {
                            this.status = 'nomore';
                            this.params.page = this.olPage;
                            return ;
                        }
                        this.olPage = this.params.page;
                        this.list = this.list.concat(res.list.data);
                    }
                }).catch(err => {
                    // uni.hideLoading();
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
	.shopping{
	    width: 150rpx;
	    height: 50rpx;
	    background-color: #ffa800;
	    border-radius: 39rpx;
	    text-align: center;
	    line-height: 50rpx;
	    text{
	        font-size: 28rpx;
	        color: #ffffff;
	    }
	}
    .box {
        background-color: #EEEEEE;
        min-height: 100vh;
        padding: 30rpx;
    }

    .record {
        margin-bottom: 30rpx;
        padding: 0 30rpx;
        // height: 248rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 98rpx;
        border-bottom: 1px solid #EEEEEE;

        .text1 {
            font-size: 28rpx;
            color: #191919;
        }

        .text2 {
            font-size: 36rpx;
            color: #1bc078;
        }
    }

    .footer {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        font-size: 24rpx;
        color: #999999;
        // height: 150rpx;

        .imgtext {
            display: flex;
            align-items: center;
            padding: 20rpx 0;
            .img1 {
                margin-right: 30rpx;
                width: 90rpx;
                height: 90rpx;
                border-radius: 10rpx;
            }
            text {
                flex: 1;
            }
        }

        .img2 {
            width: 50rpx;
            height: 50rpx;
        }
    }
</style>
